<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>公告</span></div>
    <div>
      <el-collapse v-model="activeNames">

        <el-collapse-item title="组件内容" name="1">
     <div style="padding: 10px;">
       <div class="container">
         <i class="el-icon-menu left"></i>
         <div class="content">
           <el-form size="medium" label-width="100px">
             <el-form-item label="按钮文字"><el-input type="text" placeholder="请输入内容" v-model="data.list[0].name" show-word-limit></el-input></el-form-item>
             <el-form-item label="链接地址">
               <div><Linkdiv :linkdata="data.list[0].linkdata"></Linkdiv></div>
             </el-form-item>
           </el-form>
         </div>
       </div>
     </div>

      <draggable element="div" style="padding: 10px;" v-model="data.list" :animation="200" >
        <div class="container" v-if="i>0" v-for="(item, i) in data.list" :key="i">
          <i class="el-icon-error cancal" @click="dellist(i)"></i>
          <i class="el-icon-menu left"></i>
          <div class="content">
            <el-form size="medium" label-width="100px">
              <el-form-item label="按钮文字"><el-input type="text" placeholder="请输入内容" v-model="item.name" show-word-limit></el-input></el-form-item>
              <el-form-item label="链接地址">
                <div @click="selectlink(item, i)"><Linkdiv :linktype='linktype' :linkdata="item.linkdata"></Linkdiv></div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </draggable>

      </el-collapse-item>
      <el-collapse-item label="组件样式" name="2">
      <el-form  size="medium" label-width="100px">
        <el-form-item label="背景颜色">
        <ColorPicker :color="data" :name="'bg_color'"></ColorPicker>
        </el-form-item>
        <el-form-item label="激活背景">
    <ColorPicker :color="data" :name="'active_bg_color'"></ColorPicker>
        </el-form-item>
        <el-form-item label="文字颜色">
    <ColorPicker :color="data" :name="'text_color'"></ColorPicker>
        </el-form-item>
        <el-form-item label="激活文字">
    <ColorPicker :color="data" :name="'active_text_color'"></ColorPicker>
        </el-form-item>
      </el-form>
      </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>
<script>
  import ColorPicker from '@/components/ColorPicker/index';
  import draggable from 'vuedraggable';
  import Linkdiv from '@/components/Link/index';
  export default{
    data() {
      return {
        activeNames: ['1', '2'],
        acivedata: {},
        activid: 0,
        linktype:['5']
      };
    },
    props: {
      data: {
        type: Object,
        default: {}
      }
    },
    components: {
      ColorPicker,
      draggable,
      Linkdiv
    },
    methods:{
      selectlink(item, i) {
        this.acivedata = item;
        this.activid = i;
        this.$parent.showlinkselcet(item,['5']);
      },
      getAData(item) {
        this.acivedata.linkdata = item;
      },
	  dellist(i) {
	    this.data.list.splice(i, 1);
	  },
    }
  }
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  border: 1px solid #e9edef;
  background: #f4f6f8;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;

  > i {
    font-size: 24px;
  }

  &:hover {
    .cancal {
      display: block;
    }
  }

  .cancal {
    font-size: 20px;
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
    display: none;
  }

  .content {
    flex: 1;
  }
}
.no_botom .el-form-item {
  margin-bottom: 0;
}
</style>
